<template>
  <div class="settings">
    <el-link icon="el-icon-s-order" href="/mall/orders">我的订单</el-link>
    <el-link icon="el-icon-shopping-cart-2" href="/mall/cart">购物车</el-link>

    <el-dropdown icon="el-icon-user">
      <span class="el-dropdown-link">
        <i class="el-icon--left el-icon-user"></i>{{ userInfo.username }}
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-if="userInfo.valid">
          <span class="el-dropdown-link">
            <i class="el-icon--left el-icon-medal-1"></i>{{ userInfo.score }}
          </span>
        </el-dropdown-item>
        <el-dropdown-item v-if="userInfo.valid">
          <div @click="$router.push('/personal-center')">个人中心</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="!userInfo.valid">
          <div @click="register">注册</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="!userInfo.valid">
          <div @click="login">登录</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="userInfo.valid && userInfo.authority === '供应商'">
          <div @click="supply">上新商品</div>
        </el-dropdown-item>

        <el-dropdown-item v-if="userInfo.valid">
          <div @click="logout">退出</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>

</template>

<script>
export default {
  name: "Settings",
  created() {
    this.userInfo = this.$store.getters.getUser;
    if (!this.userInfo || !this.userInfo.username) {
      this.userInfo = {
        username: "游客",
        valid: false
      };
    } else {
      this.userInfo.valid = true;
    }
  },
  data() {
    return {
      userInfo: null,
    }
  },
  methods: {
    register() {
      this.$router.push("/register")
    },
    login() {
      this.$router.push("/login")
    },
    supply() {
      this.$router.push("/supply")
    },
    logout() {
      const _this = this;
      this.$axios.get('/logout', {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then((res) => {
        _this.$store.commit('REMOVE_INFO');
        _this.userInfo = {valid: false};
        _this.$router.push('/login');
      });
    }
  }
}
</script>

<style scoped>

.settings {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

</style>